<template>
    <div v-html="markdownHtml" class="markdown-body Light"></div>
</template>

<script>
var marked = require('marked')
var highlight = require('highlight.js')

const renderer = new marked.Renderer()
marked.setOptions({
    renderer,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    highlight: function (code) {
        return highlight.highlightAuto(code).value
    }
})
export default {
    props: {
        md: {
            required: true,
            type: String,
            default: ''
        }
    },
    computed: {
        markdownHtml() {
            return marked(this.md, {
                sanitize: false
            })
        }
    }
}
</script>

<style lang="less">
@import "../assets/less/md-code";
@import "../assets/less/md-text";
</style>

